import Base from '@/components/Base';
import { View, Text } from '@/components/KayUI';
import { Slider, Input } from 'antd';
import cx from 'classnames';
import React from 'react';
import Calc from '@/modules/calc';
import intf from '@/modules/interface';
import styles from './index.less';

interface BaseInfo {
  width: number; //点击框的宽度
  height: number;
  x: number; //点击位置距点击框左边的距离
  y: number;
}

interface Props extends React.HTMLAttributes<HTMLDivElement> {
  onChangePosition?: (obj: { persentX: number; persentY: number }) => void;
  value?: { persentX: number; persentY: number };
}
interface States {
  handleX: number;
  handleY: number;
}

/**
 ** 返回
 ** persentX: X轴百分比值
 ** persentY: Y轴百分比值
 * **/

export default class DragArea extends Base<Props, States> {
  public state: States = {
    handleX: 0,
    handleY: 0,
  };
  private isMouseDown: boolean = false;
  private handleW: number = 10;
  private persentX: number = 0; //handle所在位置的百分比，用来对比props.value
  private persentY: number = 0;
  private currentInfo: BaseInfo = {
    width: 1,
    height: 1,
    x: 0,
    y: 0,
  };

  public didMount() {
    // console.log('this.mainRef:::', this.mainRef.offsetWidth, this.mainRef.offsetHeight);
    if (
      this.props.value &&
      this.mainRef &&
      this.mainRef.offsetWidth > this.handleW
    ) {
      //TODO: //初始化没有width，没法计算x,y
      this.currentInfo = {
        width: this.mainRef.offsetWidth,
        height: this.mainRef.offsetHeight,
        x: (this.currentInfo.width * this.props.value.persentX) / 100,
        y: (this.currentInfo.height * this.props.value.persentY) / 100,
      };
      this.changeHandlePosition(this.currentInfo);
    }
  }
  public componentWillReceiveProps(nextProps: any) {
    //对比数值保留1位小数，不需要很高精度
    if (
      nextProps.hasOwnProperty('value')
      // && nextProps.value.persentX && nextProps.value.persentY
    ) {
      // console.log("我丢", nextProps.value, nextProps.hasOwnProperty('value'))
      if (
        parseInt(nextProps.value.persentX * 10 + '') !=
          parseInt(this.persentX * 10 + '') ||
        parseInt(nextProps.value.persentY * 10 + '') !=
          parseInt(this.persentY * 10 + '')
      ) {
        // th
        // console.log('this.currentInfo:', nextProps.value)
        this.currentInfo = {
          ...this.currentInfo,
          x: (this.currentInfo.width * nextProps.value.persentX) / 100,
          y: (this.currentInfo.height * nextProps.value.persentY) / 100,
        };
        this.changeHandlePosition(this.currentInfo);
      }
    }
  }

  public render() {
    const {
      className,
      children,
      onChangePosition,
      value, //保证restProps不包含自定义的props，自定义的props不能直接传给div
      ...restProps
    } = this.props;
    const { handleX, handleY } = this.state;

    return (
      <View
        className={cx(styles.main, className)}
        {...restProps}
        onMouseDown={this.mouseDown}
        onMouseMove={this.mouseMove}
        onMouseUp={this.mouseUp}
        onMouseOut={this.onMouseOut}
        ref={(e) => {
          this.mainRef = e;
        }}
      >
        <View
          className={styles.handle}
          style={{
            width: this.handleW + 'px',
            height: this.handleW + 'px',
            left: handleX,
            top: handleY,
          }}
        ></View>
      </View>
    );
  }
  private mainRef: any;

  private parseEvent = (e: any) => {
    // const target = e.target || {};
    // const currentX = e.clientX;     //点击位置距窗口左边距离
    // const currentY = e.clientY;

    const nativeEvent = e.nativeEvent || {}; //nativeEvent才能拿到offsetX
    // const layerX = nativeEvent.layerX;   //点击位置距点击框左边的距离
    //layerX, layerY可能从-1开始的。。。用offsetX。。。

    this.currentInfo = {
      width: nativeEvent.target.offsetWidth, //点击框的宽度
      height: nativeEvent.target.offsetHeight,
      x: nativeEvent.offsetX, //点击位置距点击框左边的距离
      y: nativeEvent.offsetY,
    };
    return this.currentInfo;
  };

  private mouseDown = (e) => {
    const res = this.parseEvent(e);
    // console.log('mouseD')
    this.changePositionAndSubmit(res);
    this.isMouseDown = true;
  };
  private mouseUp = (e) => {
    // console.log('mouseU')
    this.isMouseDown = false;
  };
  private onMouseOut = (e) => {
    //出去了也断掉
    this.isMouseDown = false;
  };

  private mouseMove = (e) => {
    //TODO: mouse被限制在目标框内了，最好改成整个body的move监听
    const res = this.parseEvent(e);
    if (this.isMouseDown) {
      // console.log('mouseM', res.width, res.height, res.x, res.y);
      this.changePositionAndSubmit(res);
    }
  };

  private changePositionAndSubmit = (res: BaseInfo) => {
    if (!res || !res.width || res.width < this.handleW * 1.5) {
      return; //有小几率返回出错
    }

    this.changeHandlePosition(res);

    const { onChangePosition } = this.props;
    this.persentX = (100 * res.x) / res.width;
    this.persentY = (100 * res.y) / res.height;
    // console.log(this.persentX, this.persentY)
    if (onChangePosition) {
      onChangePosition({
        persentX: this.persentX,
        persentY: this.persentY,
      });
    }
  };
  private changeHandlePosition = (res: BaseInfo) => {
    this.setState({
      handleX: this.calculateHandleX(res), //要减去handle的宽高再算位置
      handleY: this.calculateHandleY(res),
    });
  };
  private calculateHandleX = (res: BaseInfo) => {
    //要减去handle的宽高再算位置
    return Calc.map(
      res.x,
      0,
      res.width,
      -this.handleW * 0.5,
      res.width - this.handleW * 0.5,
    );
  };
  private calculateHandleY = (res: BaseInfo) => {
    return Calc.map(
      res.y,
      0,
      res.height,
      -this.handleW * 0.5,
      res.height - this.handleW * 0.5,
    );
  };
}
